<template>
  <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="calendar-gradient" x1="32" y1="8" x2="32" y2="56" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#FF4545"/>
        <stop offset="100%" stop-color="#CC0000"/>
      </linearGradient>
    </defs>
    
    <!-- 日历底板 -->
    <rect x="10" y="14" width="44" height="42" rx="4" fill="url(#calendar-gradient)"/>
    
    <!-- 顶部白色区域 -->
    <rect x="10" y="14" width="44" height="12" rx="4" fill="white"/>
    <rect x="10" y="22" width="44" height="4" fill="white"/>
    
    <!-- 装订孔 -->
    <circle cx="20" cy="12" r="1.5" fill="#CC0000"/>
    <circle cx="44" cy="12" r="1.5" fill="#CC0000"/>
    
    <!-- 日期数字 -->
    <text x="32" y="45" text-anchor="middle" font-size="20" font-weight="bold" fill="white">
      {{ currentDay }}
    </text>
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const currentDay = computed(() => new Date().getDate())
</script>

<style scoped>
svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
</style>

